<template>
  <div class="app-container" id='user'>
    <!-- 查询 -->
    <div class="filter-container">
      <!-- clearable 清空输入框 -->
      <!-- loading 按钮加载状态属性 -->
      <el-input v-model="listQuery.username" clearable class="search-item" placeholder="请输入用户名"></el-input>
      <el-input v-model="listQuery.id" clearable class="search-item" placeholder="请输入反馈ID"></el-input>
      <el-button type="primary" :loading="searchLoading" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <!-- border 添加边框 -->
    <!-- sortable  排序-->
    <!-- align="center" 表格内容居中 -->
    <el-table :data="tableData" style="width: 100%" border fit highlight-current-row>
      <el-table-column prop="id" align="center" label="反馈ID" width="100" sortable>
      </el-table-column>
      <el-table-column prop="username" align="center" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="手机号">
      </el-table-column>
      <el-table-column prop="feedType" align="center" label="反馈类型">
      </el-table-column>
      <el-table-column prop="content" align="center" label="反馈内容">
      </el-table-column>
      <el-table-column align="center" label="反馈图片" prop="picUrls">
          <template slot-scope="scope">
              <img v-for="(item,index) in scope.row.picUrls" :key="index" :src="item" width="40">
          </template>
      </el-table-column>
      <el-table-column prop="addTime" align="center" label="时间">
      </el-table-column>
    </el-table>
    <div class="footerPage">
      <pagination v-show="total>0" :total="total" :pageSizes="[2, 4, 6, 8]" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"></pagination>
      <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
        :page-sizes="[2, 4, 6, 8]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination> -->
    </div>
  </div>
</template>
<script>
  import { feedBack } from '@/api/user/user';
  import Pagination from '../user/Pagination'
  export default {
    name: 'User',
    components: {
      Pagination
    },
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 2,
          username: '',
          id: '',
          sort: 'add_time',
          order: 'desc'
        },
        total: 0,
        currentPage: '',
        searchLoading: false,
        tableData: [],
      }
    },
    created() {
      // 数据初始化
      this.getList();
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.listQuery.page = 1;
        this.getList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.listQuery.page = val;
        this.getList();
      },
      getList(){
        feedBack(this.listQuery).then(res => {
          console.log(res);
          this.tableData = [];
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
      },
      handleFilter(){
        console.log(this.listQuery);
        this.listQuery.page = 1;
        this.getList();
      }
    }
  }

</script>
<style>
  .filter-container {
    display: flex;
    justify-content: right;
    align-items: center;
  }
  .footerPage{
    margin-top:20px;
    float: right;
  }

</style>
<style scoped>
  #user .search-item {
    width: 200px;
    margin-right: 5px;
  }

</style>
